<template>
	<view class="pages-mine" v-if="detail.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left" title="签到">
		</uni-nav-bar>
		<view class="sign-info abs">
			<image mode="aspectFill" lazy-load class="common-bg sign abs" :src="cover"></image>
			<view @tap="$util.goUrl({url:`/shop/pages/integral/list`})"
				class="exchange-btn abs flex-center f-caption c-base">兑换好礼
			</view>
			<view class="integral-info abs flex-center flex-column c-base">
				<view class="integral-num">{{detail.integral}}</view>
				<image lazy-load class="integral-icon mt-sm" src="/static/image/shop/integral.png"></image>
				<view class="f-icontext">我的积分</view>
			</view>
			<view class="count-info abs flex-center ml-md mr-md fill-base radius-24">
				<view class="flex-center flex-column">
					<view class="f-lg-title c-title text-bold">{{detail.sign_num}}</view>
					<view class="f-caption c-caption">连续签到(天)</view>
				</view>
				<view class="flex-center flex-column">
					<view class="f-lg-title c-title text-bold">{{detail.total_sign_num}}</view>
					<view class="f-caption c-caption">累计签到(天)</view>
				</view>
			</view>
		</view>
		<view class="space-sign rel"></view>
		<view class="sign-date-info fill-base mt-md ml-md mr-md radius-24">
			<view class="flex-center pt-lg pb-lg">
				<view class="flex-y-center f-paragraph">
					<i @tap.stop="toChangeDate(-1)" class="iconfont icon-sanjiao pl-lg pr-lg rotate-180"></i>
					<view class="month-text flex-center f-sm-title c-title text-bold"> {{detail.month}} </view>
					<i @tap.stop="toChangeDate(1)" class="iconfont icon-sanjiao pl-lg pr-lg"></i>
				</view>
			</view>
			<view class="day-info flex-warp">
				<view class="day-item flex-center flex-column" v-for="(item,index) in weekList">
					{{item}}
				</view>
				<view class="day-item flex-center flex-column" v-for="(item,index) in timeList">
				</view>
				<!-- status 0可签到；1已签到；2未在签到时间内 -->
				<view @tap.stop="toChangeItem('dayInd',index)"
					class="day-item flex-center flex-column f-title c-title radius"
					:class="[{'sign':item.status == 1 },{'today':item.day_str == today || dayInd == index},{'register':item.day_str == detail.create_time}]"
					:style="{color:item.day_str == today || item.day_str == detail.create_time || dayInd == index ? '#fff' : ''}"
					v-for="(item,index) in detail.list" :key="index">
					{{item.day_str == detail.create_time ? '注册' : item.day}}
				</view>
			</view>
			<view class="flex-between pl-lg pr-lg pb-md f-paragraph c-title">
				<view @tap="$refs.show_rule_item.open()" class="flex-center c-caption"><i
						class="iconfont icon-wenhao mr-sm"></i>签到规则</view>
				<view @tap="toChangeItem('is_sign', !is_sign)" class="flex-center">签到提醒<i class="iconfont ml-sm"
						:class="[{'icon-switch c-caption':!is_sign},{'icon-switch-on':is_sign}]"
						:style="{color:is_sign?primaryColor:''}"></i></view>
			</view>
			<view @tap="toSign" class="sign-btn flex-center f-title c-base radius">立即签到</view>
			<view class="space-lg"></view>
		</view>
		<view class="mt-md ml-md mr-md pd-lg fill-base radius-24">
			<view class="f-title c-title text-bold">积分纪录</view>
			<block v-for="(item,index) in list.data" :key="index">
				<view @tap.stop="goDetail(index)" class="integral-item flex-center mt-md radius-16">
					<image lazy-load class="integral-img radius-16" src="/static/image/shop/integral.png"></image>
					<view class="flex-1 ml-lg">
						<view class="flex-1 flex-between">
							<view>
								<view class="f-paragraph c-title mt-sm mb-sm">{{item.create_date}} 签到赠送</view>
								<view class="f-caption" style="color: #C7C7C7;">{{item.create_time_text}}</view>
							</view>
							<view class="flex-y-baseline f-caption" :style="{color:primaryColor}">+<view
									class="f-lg-title">
									{{item.integral}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>


		<uni-popup ref="show_rule_item">
			<view class="popup-rule">
				<view class="rule-info pd-lg fill-base radius-24">
					<view class="flex-center f-title c-title text-bold">签到规则</view>
					<view class="rule-text mt-lg f-paragraph">
						<text decode="emsp" style="word-break:break-all;">{{detail.integral_text}}</text>
					</view>
				</view>
				<i @tap="$refs.show_rule_item.close()" class="flex-center mt-lg iconfont icon-close c-base"></i>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				cover: 'https://lbqny.migugu.com/admin/farm/default_sign.png',
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				timeList: [],
				today: '',
				dayInd: -1,
				is_sign: true,
				detail: {},
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
			async initIndex(day = '') {
				let today = this.$util.DateToUnix(this.$util.formatTime(new Date().getTime(),
					'YY-M-D'))
				this.today = today
				day = day || this.$util.formatTime(today * 1000, 'YY-M-D')
				let [detail] = await Promise.all([this.$api.shop.signinIndex({
					day
				}), this.getList()])
				detail.id = 1
				let {
					list,
					sign_notice,
					create_time
				} = detail
				detail.create_time = this.$util.DateToUnix(this.$util.formatTime(create_time * 1000, 'YY-M-D'))
				this.dayInd = list.findIndex(item => {
					return item.day_str == today
				})
				let {
					week,
					day_str
				} = list[0]
				detail.month = this.$util.formatTime(day_str * 1000, 'YY年M月')
				let timeList = []
				if (week !== 0) {
					for (let i = 0; i < week; i++) {
						timeList.push({
							id: 0
						})
					}
				}
				this.timeList = timeList
				this.is_sign = sign_notice === 1
				this.detail = detail
				this.$util.hideAll()
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex()
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let newList = await this.$api.shop.signinRecordList(param);
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			toChangeDate(type) {
				let {
					list
				} = this.detail
				let one = 24 * 3600
				let index = type === 1 ? list.length - 1 : 0
				let {
					day_str
				} = list[index]
				let day = this.$util.formatTime((day_str + one * type) * 1000, 'YY-M-D')
				this.initIndex(day)
			},
			toChangeItem(key, val) {
				if (key === 'dayInd') {
					let {
						status,
						day_str
					} = this.detail.list[val]
					if (status) {
						let {
							create_time
						} = this.detail
						let msg = day_str < create_time ? `注册时间后才可签到` : `签到未开始`
						this.$util.showToast({
							title: status == 1 ? `已签到` : msg
						})
						return
					}
				}
				this[key] = val
				if (key === 'is_sign') {
					this.$api.user.userUpdate({
						sign_notice: val ? 1 : 0
					})
				}
			},
			async toSign() {
				let {
					dayInd,
				} = this
				let {
					day_str: day
				} = this.detail.list[dayInd]
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					await this.$api.shop.signin({
						day
					})
					this.$util.showToast({
						title: `签到成功`
					})
					this.lockTap = false
					await this.initRefresh()
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.pages-mine {
		.sign-info {
			width: 100%;
			height: 579rpx;
			top: 0;
			left: 0;
			z-index: 1;

			.exchange-btn {
				top: 167rpx;
				right: 0;
				width: 146rpx;
				height: 53rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 100rpx 0 0 100rpx;
				z-index: 2;
			}

			.integral-info {
				width: 100%;
				height: 217rpx;
				top: 167rpx;
				left: 0;

				.integral-num {
					font-size: 50rpx;
				}

				.integral-icon {
					width: 32rpx;
					height: 32rpx;
				}

			}

			.count-info {
				width: calc(100% - 40rpx);
				height: 162rpx;
				bottom: 0;

				.flex-center {
					width: 50%;
				}

			}


		}

		.space-sign {
			width: 100%;
			height: 579rpx;
			top: 0;
			z-index: -1;
		}

		.sign-date-info {
			.month-text {
				width: 300rpx;
			}

			.day-info {
				margin: 0 5rpx;

				.day-item {
					width: 62rpx;
					height: 62rpx;
					margin: 10rpx 19rpx;

					.f-title {
						height: 36rpx;
					}
				}

				.sign {
					background: #EFEFEF;
				}

				.today {
					background: linear-gradient(4deg, #39b54a 0%, #69D275 100%);
					box-shadow: 0px 3px 11px 0px rgba(13, 143, 57, 0.34);
				}

				.register {
					background: linear-gradient(4deg, #F3A664 0%, #FBE945 100%);
					box-shadow: 0px 3px 11px 0px rgba(243,166,100, 0.34);
					font-size: 24rpx;
				}

			}



			.icon-wenhao {
				font-size: 26rpx;
			}

			.icon-switch,
			.icon-switch-on {
				font-size: 70rpx;
			}

			.sign-btn {
				width: 540rpx;
				height: 72rpx;
				margin: 0 auto;
				background: linear-gradient(360deg, #39b54a 0%, #69D275 100%);
				box-shadow: 0px 6rpx 17rpx 0px rgba(13, 143, 47, 0.3500);
			}
		}

		.integral-item {

			.integral-img {
				width: 47rpx;
				height: 47rpx;
			}
		}

		.popup-rule {
			width: 596rpx;
			margin: 0 auto;

			.rule-info {
				margin-top: 10vh;

				.rule-text {
					color: #4A4A4A;
					line-height: 1.4;
					min-height: 100rpx;
					max-height: 60vh;
					overflow: auto;
				}
			}

			.icon-close {
				font-size: 70rpx;
			}
		}

	}
</style>
